<template>
  <div class="block">
    <div>
      <div style="display: flex">
        <div style="flex: 1; margin-top: 50px;">
          <div id="bie" style="width: 100%; height: 400px"></div>
        </div>
      </div>

    </div>

  </div>
</template>
<script>

import request from '@/utils/request'
import * as echarts from 'echarts';

export default {
  name: 'AboutView',

  data() {
    return {
      activeName: ['1'],
      data: [],
      urls: [
        'https://pic1.zhimg.com/80/v2-a6a557d300455781bbda336d4b0eb0b4_1440w.webp?source=2c26e567',
        'https://picx.zhimg.com/80/v2-d2fef77891316ccf1aec19e21be7c7a7_1440w.webp?source=2c26e567',
        'https://picx.zhimg.com/80/v2-42cd013e195e45ee45ade3fd14f40f1b_1440w.webp?source=2c26e567',
        'https://picx.zhimg.com/80/v2-50967d72a5f176b726bd9d83d0f337c7_1440w.webp?source=2c26e567',
        'https://pic1.zhimg.com/80/v2-e2a763f3a9a2564ad1d80aba479b905c_1440w.webp?source=2c26e567',
      ]
    }
  },

  mounted() {
    this.initBie();
    this.initEcharts();
  },

  methods: {
    // 系统公告
    initEcharts() {
      request.get("/other/echarts/bie").then(res => {
        if (res.code === '0') {
          // 开始去渲染饼图数据啦
          this.initBie(res.data)
        } else {
          this.$message.error(res.msg)
        }
      })

    },


    // 百度Echarts
    initBie(data) {
      let chartDom = document.getElementById('bie');
      let myChart = echarts.init(chartDom);
      let option;

      option = {
        title: {
          text: '限定皮肤分类统计',
          subtext: '三大类',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '皮肤分类',
            type: 'pie',
            radius: '50%',
            data: data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      option && myChart.setOption(option);
    },



  }

}
</script>

<style>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例并填充容器 */
  /* 你还可以添加其他样式，比如边框、阴影等 */
}
</style>